{% extends 'ApplicationBootstrapBundle::layoutAdmin.html.twig' %}

{% block title %}SB Admin - Bootstrap Admin Template{% endblock %}

{% block stylesheets %}
    <link href="{{ asset('bundles/applicationbootstrap/css/charts/morris.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block javascripts %}

    <!-- Morris Charts JavaScript -->
    <script src="{{ asset('bundles/applicationbootstrap/js/charts/morris/raphael.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('bundles/applicationbootstrap/js/charts/morris/morris.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('bundles/applicationbootstrap/js/charts/morris/morris-data.js') }}" type="text/javascript"></script>

{% endblock %}

{% block body %}
<div id="page-wrapper">
    <div class="container-fluid">
    
        <!-- Page Heading -->
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">
                    Charts
                </h1>
                <ol class="breadcrumb">
                    <li>
                        <i class="fa fa-dashboard"></i>  <a href="{{ path('_admin-dashboard_index') }}">Dashboard</a>
                    </li>
                    <li class="active">
                        <i class="fa fa-bar-chart-o"></i> Charts
                    </li>
                </ol>
            </div>
        </div>
        <!-- /.row -->
        
        <!-- Morris Charts -->
        <div class="row">
            <div class="col-lg-12">
                <h2 class="page-header">Morris Charts</h2>
                <p class="lead">Morris.js is a very simple API for drawing line, bar, area and donut charts. For full usage instructions and documentation for Morris.js charts, visit <a target="_blank" href="http://morrisjs.github.io/morris.js/">http://morrisjs.github.io/morris.js/</a> <a class="btn btn-primary btn-sm btn-social-icon" href="https://github.com/morrisjs/morris.js" target="_blank"><i class="fa fa-github"></i> GitHub</a>.</p>
            </div>
        </div>
        <!-- /.row -->

        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-green">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="fa fa-bar-chart-o"></i> Area Line Graph Example with Tooltips</h3>
                    </div>
                    <div class="panel-body">
                        <div id="morris-area-chart"></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.row -->

        <div class="row">
            <div class="col-lg-4">
                <div class="panel panel-yellow">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="fa fa-long-arrow-right"></i> Donut Chart Example</h3>
                    </div>
                    <div class="panel-body">
                        <div id="morris-donut-chart"></div>
                        <div class="text-right">
                            <a href="#">View Details <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="panel panel-red">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="fa fa-long-arrow-right"></i> Line Graph Example with Tooltips</h3>
                    </div>
                    <div class="panel-body">
                        <div id="morris-line-chart"></div>
                        <div class="text-right">
                            <a href="#">View Details <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="fa fa-long-arrow-right"></i> Bar Graph Example</h3>
                    </div>
                    <div class="panel-body">
                        <div id="morris-bar-chart"></div>
                        <div class="text-right">
                            <a href="#">View Details <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.row -->
 
    </div>
</div>      
{% endblock %}